<!--
 * @description: 角色形象编辑
 * @fileName: RoleImage
 * @author: 17076
 * @date: 2025/2/27-下午3:54
 * @version: V1.0.0
-->

<template>
  <cs-dialog
    :dialog="dialogOption"
    @onSubmit="save"
  >
    <div slot="content">
      <el-form ref="form" :model="infoForm" label-width="55px">
        <el-row :gutter="10">
          <el-col v-for="(item, index) in infoForm.playRoleImages" :key="index" :span="24" style="margin-bottom: 10px">
            <el-form-item label="服饰" :prop="'playRoleImages.' + index + '.dress'" :rules="{ required: true, message: '服饰不能为空!', trigger: 'blur' }">
              <el-input v-model="item['dress']" placeholder="请输入服饰" />
            </el-form-item>
            <el-row :gutter="10">
              <el-col v-for="(subItem, subIndex) in item.images" :key="subIndex" :span="6">
                <div class="flex-column angle-item">
                  <div class="avatar-uploader" @click="handleUpload(index, subIndex)">
                    <input :ref="'upload' + index + subIndex" hidden type="file" accept=".png,.jpg,.jpeg" @change="handleFileChange($event, subItem)">
                    <img v-if="subItem.fileId" :src="downloadUrl + subItem.fileId" class="avatar">
                    <div v-else class="flex-column" style="align-items: center">
                      <i class="el-icon-plus avatar-uploader-icon" />
                      <span class="el-upload__text">点击上传图片</span>
                      <div class="el-upload__tip">支持 JPEG、PNG图片格式图片大小≤ 5MB。</div>
                    </div>
                  </div>
                  <el-input v-if="subItem['changeAngel'] === '2'" v-model="subItem.angle" placeholder="自定义" style="margin-top: 10px" />
                  <span v-else style="margin-top: 10px">{{ subItem.angle }}</span>
                  <i v-if="subItem.fileId" class="el-icon-delete delete-button" @click.stop="handleDelete(subItem)" />
                  <i v-if="subItem['changeAngel'] === '2'" class="el-icon-remove-outline remove-angle" @click.stop="handleRemove(index, subIndex)" />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="flex-column add-icon" @click="handleAddAngle(index)">
                  <i class="el-icon-plus" />
                  <span class="el-upload__text">点击新增角度</span>
                  <div class="el-upload__tip">支持 JPEG、PNG图片格式图片大小≤ 5MB。</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <div class="liner-button" style="margin-top: 10px" @click="handleAdd">+ 添加剧照风格</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </cs-dialog>
</template>

<script>
import { baseURL } from '@/config'
import { commonDownloadFile, commonUploadFile, uploadFile, deleteFile } from '@/api/config/uploadApi'
import { updatePlayRole } from '@/api/roles'
export default {
  name: 'RoleImage',
  data() {
    return {
      dialogOption: {
        top: '5%',
        title: {
          title: '角色形象',
          subtitle: ''
        },
        show: false
      },
      // 上传参数
      uploadOption: {
        action: baseURL + commonUploadFile,
        headers: {
          'Auth-Token': localStorage.getItem('MyToken')
        }
      },
      // 图片预览链接
      downloadUrl: baseURL + commonDownloadFile,
      infoForm: {
        playRoleImages: [
          { dress: '', images: [
            { angle: '正面', fileId: '', changeAngel: '1' },
            { angle: '背面', fileId: '', changeAngel: '1' },
            { angle: '脸部特写', fileId: '', changeAngel: '1' },
            { angle: '俯角', fileId: '', changeAngel: '1' },
            { angle: '仰角', fileId: '', changeAngel: '1' },
            { angle: '全景', fileId: '', changeAngel: '1' }
          ] }
        ]
      }
    }
  },
  methods: {
    // 显示弹窗
    show(data, isEdit) {
      console.log(data, 7878)
      this.dialogOption.title.subtitle = data['name']
      this.infoForm = isEdit ? this.$baseLodash.cloneDeep(data) : {
        ...data,
        playRoleImages: [
          { dress: '', images: [
            { angle: '正面', fileId: '', changeAngel: '1' },
            { angle: '背面', fileId: '', changeAngel: '1' },
            { angle: '脸部特写', fileId: '', changeAngel: '1' },
            { angle: '俯角', fileId: '', changeAngel: '1' },
            { angle: '仰角', fileId: '', changeAngel: '1' },
            { angle: '全景', fileId: '', changeAngel: '1' }
          ] }
        ]
      }
      this.dialogOption.show = true
    },
    // 上传图片点击
    handleUpload(index, subIndex) {
      this.$refs['upload' + index + subIndex][0].value = null
      this.$refs['upload' + index + subIndex][0].click()
    },
    // 文件选择
    handleFileChange(e, item) {
      const files = e.target.files
      const rawFile = files[0]
      const formData = new FormData()
      formData.append('file', rawFile)
      uploadFile(formData).then((res) => {
        if (res['code'] === 200) {
          this.$set(item, 'fileId', res.data['id'])
        }
      })
    },
    // 添加剧照风格
    handleAdd() {
      this.infoForm.playRoleImages.push({ dress: '', images: [
        { angle: '正面', fileId: '', changeAngel: '1' },
        { angle: '背面', fileId: '', changeAngel: '1' },
        { angle: '脸部特写', fileId: '', changeAngel: '1' },
        { angle: '俯角', fileId: '', changeAngel: '1' },
        { angle: '仰角', fileId: '', changeAngel: '1' },
        { angle: '全景', fileId: '', changeAngel: '1' }
      ] })
    },
    // 添加角度
    handleAddAngle(index) {
      this.infoForm.playRoleImages[index].images.push({ angle: '', fileId: '', changeAngel: '2' })
    },
    // 删除角度
    handleRemove(index, subIndex) {
      this.infoForm.playRoleImages[index].images.splice(subIndex, 1)
    },
    // 删除图片
    handleDelete(item) {
      deleteFile(item.fileId).then(_ => {
        this.$set(item, 'fileId', '')
      })
    },
    save(callback) {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          // 判断所有图片是否至少一个有值
          const isLastOne = this.infoForm.playRoleImages.some(item => item.images.some(subItem => subItem.fileId))
          if (!isLastOne) {
            this.$baseMessage.error('至少需要上传一个角度图片!')
            return
          }
          const { code, msg } = await updatePlayRole(this.infoForm)
          code === 200 ? this.$baseMessage.success(msg || '保存成功!') : this.$baseMessage.error(msg || '保存失败!')
          // 回调数据
          this.$emit('reload')
          callback(true)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.angle-item {
  align-items: center;
  color: #B6C7D1;
  width: 100%;
  margin-bottom: 10px;
  position: relative;
  .delete-button {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }
  .remove-angle {
    position: absolute;
    left: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 17px;
  }
}
.add-icon {
  align-items: center;
  border-radius: 8px;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  color: #8c939d;
  width: 100%;
  text-align: center;
  i {
    width: 100%;
    height: 130px;
    line-height: 130px;
    font-size: 28px;
  }
}
::v-deep {
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 130px;
    line-height: 130px;
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 178px;
    object-fit: contain;
    display: block;
  }
  .el-upload__tip {
    margin: 10px;
    text-align: center;
    font-size: 12px;
  }
  .el-upload__text {
    color: $base-color-default;
  }
}

</style>
